/**
 * Created by chencheng on 17-8-31.
 */

import { PureComponent } from 'react';

import {
    Button, Icon, Row, Col, Upload, InputNumber
} from 'antd';

import T from 'utils/T';

const _ = T.lodash;
import './index.scss';
import Draggable from 'react-draggable'; // The default


export default class DrawDot extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            backgroundSize: [300, 300],
            localImg: '',
            coord: [0, 0]
        };
    }

    componentDidMount() {

    }

    drawMark = () => {
        $(this.xyContent).append(`<li><input value="[${this.state.coord[0]}, ${this.state.coord[1]}]" onclick="javascript:this.select()"></li>`);
    };

    seeImg = (img) => {

        this.setState({
            localImg: img
        });
    };
    onChangeX = (value) => {
        this.setState({
            backgroundSize: [value, this.state.backgroundSize[1]]
        });
    }
    onChangeY = (value) => {
        this.setState({
            backgroundSize: [this.state.backgroundSize[0], value]
        });
    }

    onControlledDrag=(e, position) => {
        const { x, y } = position;
        this.setState({ coord: [x, y] });
    }
    onStart=() => {
        // this.setState({ activeDrags: ++this.state.activeDrags });
    }

    onStop=() => {
        // this.setState({ activeDrags: --this.state.activeDrags });
    }



    render() {
        const dragHandlers = { onStart: this.onStart, onStop: this.onStop };

        return (
            <div className={'drawDotBox'}>
                <div className={'toolBox'}>
                    <span>尺寸：
                        <InputNumber onChange={this.onChangeX} size={'small'} value={this.state.backgroundSize[0]} /> *
                        <InputNumber onChange={this.onChangeY} size={'small'} value={this.state.backgroundSize[1]} />
                    </span>
                    <Button size={'small'} onClick={this.drawMark}>标记</Button>
                </div>
                <Row>
                    <Col span={20}>
                        <div style={{
                            overflow: 'auto',
                            height: this.state.backgroundSize[1],
                            border: '1px solid orange',
                            backgroundColor: '#ccc'
                        }}>
                            <div className="draggableBox" ref={svgBox => this.svgBox = svgBox} style={{
                                backgroundImage: 'url(' + this.state.localImg + ')',
                                backgroundSize: this.state.backgroundSize.map(item => (item + 'px')).join(' '),
                                width: this.state.backgroundSize[0],
                                height: this.state.backgroundSize[1],
                            }}>
                                <Draggable {...dragHandlers} onDrag={this.onControlledDrag} bounds="parent">
                                    <div className="dot">
                                        <div className={'tip'}/>
                                        <Button size={'small'} onClick={this.drawMark}>标记</Button>
                                    </div>
                                </Draggable>

                            </div>
                        </div>
                    </Col>
                    <Col span={4}>
                        <PicturesWall seeImg={this.seeImg} />
                        <div className={'xyBox'}>
                            <p>坐标</p>
                            <ul className={'xyContent'} ref={e => this.xyContent = e}>

                            </ul>
                        </div>
                    </Col>

                </Row>


            </div>
        );
    }
}

class PicturesWall extends React.Component {
    state = {
        previewVisible: false,
        previewImage: '',
        fileList: [],
    };

    handleCancel = () => this.setState({ previewVisible: false })

    handlePreview = (file) => {
        console.log(file);
        this.props.seeImg(file.url || file.thumbUrl);
    };

    handleChange = ({ fileList }) => {
        if (fileList.length > 0) {
            this.props.seeImg(fileList[0].url || fileList[0].thumbUrl);
        }

        this.setState({ fileList });
    };

    render() {
        const { fileList } = this.state;
        const uploadButton = (
            <div>
                <Icon type="plus" />
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        return (
            <div className="clearfix">
                <Upload
                    // action="/"
                    listType="picture-card"
                    fileList={fileList}
                    onPreview={this.handlePreview}
                    onChange={this.handleChange}
                >
                    {fileList.length >= 1 ? null : uploadButton}
                </Upload>
            </div>
        );
    }
}

